Transcript
[0:02] Hehehehe.
Na? Ja, also, damit hab ich noch nie was gemacht. Das hat auch gar keinen Link, ne?
Das hat ja rausgesucht, aber das hat keine Page bei MDN.
Nee, so sieht's aus. Und schon hat man einen animierten Film, und den Ton kann man dann auch noch irgendwie einsprechen lassen von der AI, und du musst nur hinten das Script reinballern.
Und deswegen bist du halt besser in der Produktentwicklung als ich, weil auf den Trichter bin ich noch nicht gekommen.
[0:29] Music.
[0:53] Working Draft Revision 500 und ein paar Zerquetschte.
[0:59] Diese Revision wird von niemandem gesponsert. Stattdessen möchte ich euch gerne einladen, die Frontiers-Konferenz am 21. und 22.
September in Utrecht zu besuchen.
Die Konferenz ist ein Non-Profit-Projekt und wird von mir und meinen Mitschleitern aus dem niederländischen Frontiers-Verein organisiert. Und wir fahren dick auf.
Es kommen Andy Bell, Lervi Ruh, Zach Leatherman, Sarah Vieira, Laura Kalbach und viele mehr.
Insgesamt 14 Sprecher.
Und die Talks behandeln genau gar nicht irgendwelche aktuellen Frameworks, sondern betrachten jeweils bestimmte Aspekte der Webplattform oder des Webcraftings.
Es geht um neue Colorspaces, Webcomponents, Performance, Accessibility, Privacy, 3D und LED.
Ein Ticket für die zwei Tage liegt bei 500 Euro zuzüglich niederländischer Mehrwertsteuer und inkludiert sind nicht nur zwei Tage voller toller Vorträge, sondern auch reichlich Essen, und Trinken für euer leibliches Wohl.
Und Utrecht ist auch immer ein Besuch wert, mit seiner Altstadt und ihren Grachten, aber auch ihren spektakulären Neubauten rund um den Hauptbahnhof.
[2:11] Es gibt viele gemütliche Ecken und Restaurants und Utrecht ist die Stadt in den Niederlanden mit der besten Radinfrastruktur.
Dann schaut auf frontiers-conf.org vorbei und dann sehen wir uns hoffentlich im Herbst in Utrecht.
Revision 574: Glücksrad (Applet, Headings, Slots, SVGs, Spellcheck, Screen-API, Border-Images, Indexed DB)
[2:30] Hallo und herzlich willkommen zu Working Draft Revision 500 und ein paar Zerquetschte.
Heute am Start der Hans. Hallo.
Der Shep, der aus irgendwelchen Gründen irgendwas lustig findet.
Ich weiß auch nicht was, hallo. Und meine Wenigkeit, der Peter.
Und wir lassen heute mal wieder das Glücksrad kreisen. Ihr kennt das Spiel, auf workingcraft.de slash glücksrad pickt eine Webapplikation vom Shep geschrieben aus den MDN-Daten, zufällig irgendwelche APIs oder HTML-Elemente oder sonstige Kuriositäten heraus und wir referieren darüber im Ad-Hoc-Verfahren und können dazu hoffentlich was Schlaues sagen oder lustige Geschichten erzählen und den Rest schneiden wir raus.
Wir schneiden nichts, wir schneiden nichts. Da...
So, dann würde ich sagen, wollen wir doch mal drauf loskegeln.
Applet-Element
[3:16] Chef, darf ich dir den ersten Dreh übergeben? Ja, gerne, mach ich.
Okay.
Es wird spannend, es wird spannend. Oh oh, also wir sind in der HTML-Sektion in den Elementen und da kam jetzt Applet.
[3:33] Okay also ich bin dafür wir führen hier ein paar neue regeln ein und sprechen über deprecated sachen nur noch ganz kurz.
Ja könnten wir aus was ich weiß es nicht außer es gibt was cooles darüber zu erzählen aber im grunde wird es der hans hat es ja schon sozusagen.
Angedeutet benutzt kein Mensch mehr, hat man früher benutzt.
Also für Java Applets, also eingebettete Dinger in Webseiten eigentlich, ne? Aber sonst?
Aber hat da nicht kürzlich irgendwer irgendwas erfunden, um Java-Code auf dem Web auszuführen?
Ich meine, da hätte ich vor kurzem was gelesen.
[4:10] Aber braucht man dafür Applet? Nein, aber es ist halt eben ein 1 zu 1 Ersatz dafür.
Also weil ich meine, Applet war ja wirklich die Idee, wir betten das Ding da ein und lassen tatsächlich das Java auf der Client-Maschine das ausführen.
Und das würdest du ja heutzutage nicht mehr machen. Heutzutage würdest du ja irgendwie, weiß ich nicht, direkt den Bytecode interpretieren oder irgendwas cross-kompilieren, mit WebAssembly ausführen, irgendwie sowas in der Richtung.
Und entweder hat da vor kurzem jemand was gemacht, oder da habe ich Erinnerungen, die da reinrühren, aus der ERP-Software von meinen Kunden, die ich letzte Woche betreut habe, die auf TypeScript umgestiegen sind und mir so ein paar Geschichten von ihrer letzten Version, also vor dem Typescript-Umstieg, erzählt haben, wo sie auch noch gesagt haben, ja, Java Applets, das hatten wir da auch noch am Start.
Und das ist halt ein riesiges Unternehmen und die verchecken halt massive Software an dicke Kunden.
Also, wenn man da irgendwie noch ein Projekt mit AngularJS am Laufen hat oder mit Backbone oder so, muss man sich nicht schlecht fühlen, und glaube ich, Boller geht immer.
[5:07] Also, dieses Applet, äh, ja, Element war ja eigentlich dazu gedacht, genau wie ihr gesagt habt, ne, dass man halt irgendwie Java-Code, Java-Applets in das Dokument packt.
Und irgendwann hat man das dann ersetzt mit dem Object-Element.
Ich glaub, das hat man dann öfter mal verwendet.
Jetzt reden wir aber nicht dadurch.
Genau, müssen wir nicht. Es war halt einfach, glaub ich, universeller.
Es gab ja noch, ich glaube, war das nicht auch so, Dann Flash und Silverlight auch über Object einbinden konnte.
Genau. So erinnere ich mich auch, ja. Meine Frage wäre gewesen, habt ihr das mal verwendet?
Also, habt ihr mal irgendwie Java-Applets wirklich in Webseiten eingebaut?
[5:49] Also, ich hab das nicht gemacht. Ich hab das nur so ... Es gab so Spaß-Applets, wo man mit dem Mauskörser drüber konnte. Das war so eine Wasseroberfläche, die dann so Wellen gekriegt hat.
Ja, genau, das war cool.
Aber ich konnte ja damals nicht viel und schon gar nicht Java programmieren.
Und deswegen hab ich mir dann vielleicht mal irgendwo so ein Java-Applet-Dings von so einer Bibliothek.
Da gab's ja dann so irgendwie so Sammlungen von coolen Applets.
Hotjar, glaub ... Nee, nicht Hotjar. Hot Scripts, glaub ich hieß das. Genau. Da gab's so Zeugs.
Ja, genau, das fand ich dann cool. Und das war's dann aber auch.
Hey, Hotscripts gibt's noch.
Nicht. 40.455 Resources listed. PHP Scripts, WordPress Plugin, E-Commerce Scripts.
Und Java Applets auch noch? Das glaube ich nicht.
Also ich meine, das war ja, muss man ja wirklich mal so zur Relation sagen, das war ja schon all, als man darüber nachgedacht hat, dass man Flash vielleicht absägen möchte.
Java, ja, Applets. Ja, also Java nicht, Java ist ja in Ordnung, aber Applets, hm?
Was ganz interessant ist, wenn man sich heutzutage mal die Browser-Compatibility anschaut, da ist kein Browser mehr dabei, der da irgendwas supportet, also.
[7:16] Das braucht man sich nicht nochmal anschauen.
Ich glaube, vielleicht ist das auch ein guter Take für uns, dann da weiterzugehen.
Genau, ein guter Rauswerfer. Aber vielleicht können wir ja noch sagen, können wir ja noch das nochmal weitergeben an die Hörerinnen und Hörer, also vielleicht haben die ja irgendwas cooles mit Applet mal gebaut in grauen Vorzeiten.
Oder einen coolen Use-Case, den man jetzt nicht mehr abbilden kann.
Vielleicht hat man ja mega die coole Java-Application, die man eigentlich gerne ins Web bringen würde, aber weil es kein Apple-Tag bringt.
Just kidding. Aber kann ja sein. Kann alles sein.
Also würde man dafür nicht heutzutage irgendwie so ein Remote-Desktop auf eine Canvas rendern?
Zum Beispiel. Also wenn mir jemand diese Aufgabe gegeben würde, Du hast jetzt hier diese Java-Applikation, die muss 1 zu 1 ins Web und du hast eine endliche Menge Zeit und Budget dafür.
Da würde ich sowas, glaube ich, machen wollen. Also, okay, machen wollen ist die falsche Wortkombination.
Ich würde mich gezwungen sehen, diesen Weg zu gehen, würde ich sagen.
Das ist eine gute Fragestellung. Was würde man in so einem Fall tun?
Und wäre das wirklich der beste Weg der Wahl?
Weil das bedeutet ja, du musst da halt irgendwo auch eine Remote-Maschine vorhalten.
[8:29] Und je mehr Last du da drauf bekommst, desto schwieriger wird das natürlich.
Also ist dann die Frage, was sind deine Parameter, was das Thema Lastverfügbarkeit und ähnliches anbelangt?
Würde ich mich gar nicht so fragen. Also die einzigen Möglichkeiten würde ich sehen, entweder schreibst du es in JavaScript neu.
[8:48] Oder du machst halt diese Remote-Desktop-Geschichte, weil du kannst dich ja heutzutage auch nicht darauf verlassen, dass so was wie eine Java-Runtime auf ein Client notwendigerweise da ist.
Also schau dir halt mal die ganzen mobilen Use Cases an.
Auf dem iPhone kommst du mit einem Java-Applet oder Ähnlichem nicht weiter.
Müsstest du neu schreiben oder wie gesagt, ich habe keine Ahnung von Remote-Desktop-Protokollen, aber irgendwie muss man am Ende eine Art von Frame-Buffer rauskriegen.
Das kann man doch wahrscheinlich relativ problemlos auf eine Canvas transportieren.
Das macht ja hier so, wenn du Xbox-Cloud-Gaming machst, das kannst du auch im Browser starten.
So kannst du es zum Beispiel auf den Apple-Geräten spielen, weil das natürlich nicht erlaubt ist, in den App-Store zu bringen.
Und da passiert ja auch nichts anderes, als dass da quasi so ein Xbox-Blade gestartet wird, bei dem im Rechenzentrum deine Inputs hingeschickt werden und die Videodaten zurückgestreamt werden.
Und dann, wie der Hans meinte, entweder du hast dann tatsächlich physische Geräte, oder du fährst irgendwelche virtuellen Geräte auf, also mehrere virtuelle Maschinen auf irgendwelchen echten einzelnen Geräten hoch oder so. Was ja wahrscheinlich die der einfachere Teil an an der ganzen Problemstellung ist.
[10:06] Dass man das tun kann stelle ich nicht in frage die frage ist halt nur sozusagen kosten nutzen abwägung also ich glaube halt sowas hinzubekommen und das halt, ich meine zu maintainen und gut laufen zu haben, keine ahnung ich bin da jetzt nicht der exporter um da war die anwendung irgendwie an start zu bekommen und da frage ich mich eher, investiert man nicht lieber ein paar euro und geht die andere lösung die du ja vorgeschlagen hattest.
[10:32] Oder gibt es nicht vielleicht noch einen zusätzlichen Weg, nämlich irgendwie, wir hatten es vorhin mal gesagt, man kann das heutzutage super easy transpilen.
Ich kenne mich nicht aus.
Das fände ich halt auch nochmal interessant. Was macht man im Fall von, man hat Java-Applikationen und braucht Web-Applikationen.
Aber hey, ist das nicht eigentlich ein gutes Stichwort, Peter, um auch eine Schulung einfach sich mal reinzuziehen?
Muss ja keine Schulung sein. Also kannst du mir ja irgendwie sagen, hier ist ein Problem, wie lösen wir das?
Oder besser noch, hier ist ein Problem, wir haben es gelöst, ist scheiße.
Das macht halt für mich weniger Arbeit, weil dann kann ich einfach sagen, ja, das ist aber mal gar nicht so gut geworden. Aber ich meine, so Geschichten gibt es also.
Also Neuschreiben sagt sich halt irgendwie relativ leicht, wenn du halt wirklich irgendwie über so Dekaden akkumuliertes, gleichsam institutionelles Wissen irgendwo in so einem Kobolding hast.
Das kenne ich halt von Versicherungen und so Behördensoftware und Ähnlichem.
Und da ist, glaube ich, wirklich der sinnvollste Weg, das irgendwie zu API-ifizieren.
Teilweise halt auch nicht irgendwie, dass wir die Software ändern, sondern dass es halt mehr so in die Richtung geht, das ist halt ein Terminal-Programm mit so einer Windows 1.0-artigen Benutzeroberfläche.
[11:41] Und dass man das gleichsam fernsteuert, in irgendwelche API-Calls übersetzt und das dann in eine Web-Oberfläche verbringt.
Weil was man ja halt auch nicht vergessen darf, ist halt, es ist ja nicht nur, dass die Technologie die all geworden ist, sondern auch die Bedienkonzepte sind es ja.
Und die sind ja schon relevant, wenn man zum Beispiel irgendwie Mobile- und Touch-Use-Cases abbilden will, dann ist es halt mit 1 zu 1 Übersetzung nicht getan.
[12:03] Sondern da muss man halt eben hingehen und tatsächlich die Benutzeroberfläche neu denken, aber im Prinzip, wenn man es schlau anstellt, kann ja das Backend so all bleiben, wie es will, sofern man da halt eben eine vernünftig abstrahlierende API-Schicht dazwischen klemmt.
Meistens scheitert es halt eben an vernünftig abstrahierend, sodass du halt, wenn du irgendwie so, du hast da, also ich hab das mal so gesehen, ganz im Backend war Kobol, und dann war da ein Java vor, und das hat XML ausgespuckt, und das kam ins Frontend.
Wo man ja irgendwie meinen möchte, das ist erstmal irgendwie ein Weg, der jetzt nicht komplett wahnsinnig erscheint.
Das kann man so machen.
Problem war halt, die Daten kamen in einer Form an, dass man da halt noch Kobol gerochen hat.
Von wegen so maximale Feldlängen und so Zeug, das war halt nicht ganz so gut gelöst, aber...
[12:44] Ne? Besser als das, was es vorher war, allemal, aber halt lange noch nicht gut.
Besser als pleitegehen, weil ich meine, der Laden läuft und das Zeug ist geschrieben.
Ich weiß nicht, ob es Behörde oder Versicherung war, aber so ein Kram, das ändert sich auch nicht.
Und wenn du einmal so Zeugen wie Kennzeichen, wie Autokennzeichen in den Griff bekommen hast, dann willst du das auch nicht wieder anfassen.
Mhm.
Eine Sache, die mir in dem Kontext immer wieder in den Kopf kommt, Das ist das Thema Performance natürlich, gerade diese alten Anwendungen sind natürlich auch nicht 100 Prozent der Performance angepasst, die man vielleicht heutzutage erwarten würde.
So kenne ich das zumindest aus dem Versicherungs-Business. Da denke ich, braucht man dann halt weitere Wege, um irgendwie so diese APIs, die es geben muss, irgendwie zu detachen von den Prozessen, die halt im Hintergrund wirklich die Daten schreiben.
Insofern das denn möglich ist. Aber jetzt gehen wir schon tief.
Ich glaube, Shep, du hattest noch was ausgegraben zum Thema Java Applets.
Ja, das war das Ding, woran ich gedacht hatte. Nämlich dieses, ey, wir können hier Java in WebAssembly-Applikationen ausführen.
Shep hat es natürlich gefunden.
Während ich mich nur erinnert habe, dass es an mir vorbei scrollte.
Aber ja, ich habe es also richtig geträumt. Juhu!
[14:05] Vielleicht verlinken wir das einmal. einmal. Ja, also wahrscheinlich nix, was wir jemals brauchen werden, aber vielleicht macht ihr mit sowas, was könnt ihr ja mal erzählen.
[14:18] All right, dann, wer macht als Nächstes? Hans, willst du mal drücken?
Ich drück gerne mal das Knöpfchen, den Zufallsgenerator aktivier ich mal.
Und da, oh, da hab ich jetzt natürlich einen tollen Treffer gelandet.
Heading-Elemente
[14:33] Ähm, wir sprechen über das H3-Element. Ich glaube, wenn ich mich richtig erinnere, haben wir in einer der letzten Revisionen schon mal über eins der Heading-Elemente gesprochen.
Ja, das war eine, wo wir, also Hans und ich, Da haben wir, glaub ich, nicht über H3, das war H6 oder so was, aber wir haben generell das als Anlass genommen, über Überschriften und eventuell auch den Outline-Algorithmus zu sprechen.
Genau, ganz kurz haben wir den angerissen, ja. Und HGroup oder HGroup.
HGroup. Von dem du ja ein Fan bist, Shep, ne?
Ja, ich find das ganz gut, ich benutz das auch.
[15:07] Mhm. Genau, aber vielleicht kann man da einfach auf die Revision verweisen, welche auch immer das ist. Das wird auch 500 und ein paar zerquetschte gewesen sein, glaube ich.
Ja. Ja, die auch.
Guckt einfach mal. Und drückt doch einfach noch mal. Drückt doch einfach noch mal.
Ich drücke doch einfach noch mal. Das hat keiner gesehen. Genau, das schneiden wir raus.
Das schneiden wir raus, genau. Ihr hört es natürlich trotzdem.
Slot-Attribut
[15:29] Wir schneiden nicht.
Genau, oh, jetzt bin ich überfragt tatsächlich. Das ist interessant.
Und zwar global underscore attributes slot.
Jawoll, ja. Oh, okay. Im Shadow DOM anscheinend. Aber weiß einer von euch dazu mehr?
Joa. Slot.
Also, ich referiere mal so kurz das kurz runter. Also, Shadow DOM macht ja inneren Aufbau von Custom Elements, damit die ihr eigenes UI implementieren.
Und.
[16:06] Shadow DOM macht dabei nicht notwendigerweise nur ein Ersetzen vom ganzen Inhalt, sondern bietet auch die Möglichkeit, Inhalt von einem HTML-Element, von einem Custom-Element wieder ins Shadow DOM rein zu transportieren, reinbeamen.
Die Idee ist, dass das Shadow DOM in dem Fall nicht den Content ersetzt, sondern ihn gleichsam umrahmt.
Quasi ein HTML-Decorator oder ein DOM-Decorator.
Das ist eine gar nicht so schlechte Idee, das so zu bezeichnen.
Wobei ja streng genommen jedes Element, das Content haben kann, ein solcher Decorator ist, weil es wrappt ja seinen Content, nur halt eben ein Decorator mit nicht offensichtlichen Implementierungsdetails.
Und diese Stellen, an die man den Content rein transportieren kann.
[16:47] Die heißen Slots, und davon kann man mehrere haben, und wenn man mehr als einen hat, dann kriegen die Namen, die Slotelemente kriegen ein Name-Attribut, und Kind-Elemente vom Custom-Element mit solchen Slots kann ich den einzelnen Slots zuweisen über das Slot-Attribut, und deswegen ist es auch ein globales Attribut, weil ich jedes Element in einen Slot stecken kann und ich also auf jedem Element sagen können möchte, du kommst in diesen Slot, du kommst in jenen.
Mhm. Und, äh, Rückfrage, würde man dieses Slot-Attribut dann im Shadow DOM einmal an das Ding machen, was das aufnehmen wird?
Und dann packt man's im Light DOM auch wiederum an das Element, das im Shadow DOM dann in dieses aufnehmende Element gesteckt wird?
Oder wird das nur im Light- oder im Shadow DOM benutzt?
Das Slot-Attribut nur im Light DOM.
Und im Shadow DOM gibst du dem Slot-Element ein Name-Attribut.
Okay. Und darüber ist die Zuordnung geregelt. Okay.
[17:47] Verstanden. Ja, ist, glaub ich, auch irgendwie relativ unkontrovers und alles.
Funktioniert auch gut, so.
Ähm, was mir halt bei Slots immer so einfällt, wenn die Leute sagen, na ja, hier nehm ich Slot, ist alles ganz easy, gibt ja das Slotchange-Event.
Mit dem man mitkriegen kann, wenn sich im Slot was getan hat.
Da ist es wissenswert, dass das nur triggert für die direkten Elemente, die dem Slot zugewiesen werden und nicht den Kind.
Ah, okay, so ein bisschen wie beim Mutation Observer ja auch.
Also da, wenn du da quasi so einen ganzen ...
Also wenn du da quasi einen ganzen DOM-Zweig in einem Rutsch per innerHTML irgendwie reindonnerst, dann triggert ja quasi auch nur das Äußerste.
Und die da drinnen eben nicht, du müsstest dann quasi die Einzelnen alle quasi appenden, damit die auch alle Einzelnen triggern.
[18:41] Ja, beziehungsweise ich hätte jetzt als Analogie gesagt, Mutation-Observer, aber grundsätzlich ohne Schaltelements.
Den kann man ja auch so konfigurieren, dass er nur die Top-Level-Elemente beziehungsweise nur das Target selber observiert.
Ja, aber selbst wenn du das mit Schaltelementen, also genau, also ich nutze das ja auch zum Elemente-Instanziieren oder um die zu initialisieren, besser gesagt.
Und da horch ich halt auch in der Root-Node mit dem Mutation-Observer mit child oder children true.
Aber wenn du eben innerHTML machst, dann triggert der quasi für das Ganze, diesen ganzen Apparat, den du da reinsteckst, also mit, was weiß ich, wie viele tausend Nodes, das am Ende gepasst sind.
Aber dadurch, dass du quasi ...
Die Mutation findet halt trotzdem nur einmal statt.
Also, das DOM wird nur in einem Moment verändert. Und deswegen triggert das auch nur einmal.
Und auch nur für das quasi äußerste Element, das in diesem HTML, das du da reingesteckt hast, per HTML hinzugefügt wurde.
Aber das ist ja sozusagen eine Bedingung, die passieren kann.
Slot-Change-Event funktioniert tatsächlich immer so, dass man von den Kind-Elementen nix mitbekommt.
Okay, das heißt...
[19:58] Ich ... würde das denn ... Du hast eine Headline und hängst die ins Slot-Element rein.
Und du gibst der Headline irgendwie, keine Ahnung, und dann löscht du die Headline.
Das triggert ein Slot-Change-Event. Hat sich was getan an den Kindern von dem DOM, beziehungsweise an den Distributed Nodes heißt das.
Wenn du aber dann dem Headline-Element ein Span-Element verpasst, das vorher nicht da war, gleich auf welchem Mechanismus, triggert das nix, weil es eben nicht ein Top-Level-Event-Element im Slot ist.
Tatsächlich wie Mutation Observer, aber ohne Children-Flag aktiv.
Genau. Und wobei ich noch nicht mal sicher bin, was sozusagen das Event-Timing angeht.
Bei Mutation Observer ist das ja auch so.
Diese Records kommen ja gebatcht und so weiter an.
Wie das beim Slotchange-Event ist, weiß ich ausm Stand nicht.
Also eigentlich, wenn's ein Event ist, dürfte es ja nicht so sein.
Aber ich hab ja die Vermutung, dass sehr viele Features der Browser auf diesen primitiven, die alle Observer sind, aufbauen, äh, intern.
Also zum Beispiel auch das Bilder-Lazy-Loading.
Das geht auch auf den Intersection Observer.
[21:08] Und damit hast du quasi ein Ding, was du verbessern kannst. Also, Intersection Observer wurde ja auch im Laufe der Zeit verbessert.
Der ist ja jetzt auch auf Version zwei und kann halt irgendwelche Sachen, die vielleicht per Compositing-Animation erst ins Bild reinanimiert werden.
Da triggert er dann auch, was er früher nicht konnte, und so Sachen. Mhm.
Ähm, und es wär ja auch doof, wenn die Browsersteller diese ganzen recht ähnlichen Dinge alle neu, alle jedes Mal anfassen müssten, wenn sie da irgendwas verbessern wollen dran.
Das kommt halt echt stark auf die Implementierungsdetails an, würde ich sagen.
Also, ich kenne ja kein C++ und so richtig, aber manchmal scrolle ich ja schon durch den Browser-Source-Code und versuche irgendwie zu verstehen, was da vor sich geht, wenn es irgendwie um spezifische Bugs geht.
Aber wenn ich da eins draus gelernt habe, dann nur weil es irgendwie so die Spezifikationen sagen, A und B implementieren das gleiche Interface und machen grob das gleiche, hat das halt ernsthaft nichts damit zu tun, Ernsthaft nichts damit zu tun, wie es am Ende wirklich implementiert ist, weil da so viele Sonderfälle und Spezialfälle und irgendwie Code und Fahde noch so drin sind, und das hängt mit irgendwas zusammen, an das du nicht gedacht hast, und dann muss das irgendwie anders gehandelt werden, weil wenn das in einem Applet-Element vorkommt, dann Sonderregel XYZ.
Also, kann sein. Gerade mit Intersection Observer kann ich mir das sehr gut vorstellen, weil du ja gerade bei so Sachen wie dem Compositing wirklich den Durchgriff auf die gerenderte Realität brauchst, gleichsam.
[22:30] Ja, oder Resize Observer für Container-Queries zum Beispiel.
Genau, genau, da bietet sich das an, aber ...
Man weiß es nicht, es ist nur eine These. Genau, ich würde auf jeden Fall keine allzu großen Geldbeträge drauf wetten.
Ich glaube, du hast recht, aber nicht so viel, dass ich da jetzt irgendwie was groß draufsetzen würde.
Alrighty, dann bist du jetzt dran mit Drücken, würde ich sagen.
Juhu! Eine neue Runde.
Eine neue Runde, ich drücke auf Zufallsgenerator aktivieren.
SVGRadialGradientElement
[23:00] Äh, das SWG, radial gradient element. Speziell das FY-Attribut.
Hehehe. Na? Ja, also damit habe ich noch nie was gemacht. Das hat auch gar keinen Link, ne?
Das hat der rausgesucht, aber das hat keine Page bei MDN.
So sieht's aus. Es gibt die SVG radial gradient element page.
Aber für das Attribut an sich jetzt nichts. Jedoch wird es erklärt mit, An SVG animated length corresponding to the FY attribute of the given radial gradient element.
Achso, okay, ja, das macht Sinn.
FY ist? Y-Achse, äh, Koordinate für den, äh, ich glaub, Fokus, kann das sein?
Fokuspunkt, ja. Genau.
Ah, ja. Jo, gut. Was ist denn, fangen wir doch eins oben drüber an, was ist denn das Radial Gradient Element?
Muss man eigentlich auch nicht so viel erklären, ne? Ist halt ein Gradient ...
Der Mechanismus, wie du im SVG das Gradient definierst. Mhm.
Joa, und dann kann man sich daraus halt so ein SVG zu klein kloppen, was ja ziemlich gut geht und so. Funktioniert alles, ganz neues.
Es ist halt wirklich so ... Ich weiß nicht, wann ich zuletzt mal gesagt hab, Ich hab jetzt hier irgendwie ein großes Programm und dessen primäre Output ist irgendwie SVG.
[24:29] Also, wann ihr mal wirklich so was gebaut habt. Hm, gebaut nicht. Nee.
Ich bin nämlich diesen Irrweg, den bin ich nämlich vor nicht allzu langer Zeit mal entlanggeschritten.
Also, ich hab jetzt hier am Wochenende so einen Trödelmarkt veranstaltet.
Da hab ich quasi 86 Stände per SVG gelayoutet, also quasi programmiert per JavaScript, wie die gelayoutet sind.
Das würde so ein bisschen dementsprechend, aber da war ich weit weg, von SVG-Radial-Gradient-Elementen einzusetzen.
[25:05] Ja, also ich hab das tatsächlich ja mal getan. Ich hab ja dieses Code-Animationsding da am Start.
Und habe sehr, sehr, sehr, sehr, sehr, sehr, sehr lange damit gekämpft, okay, wenn ich da jetzt auf Render drücke, was soll da hinten eigentlich rauskommen?
Also, am Ende irgendwie ein Filmchen oder irgendwie eine HTML-Animation.
Wie macht man das am besten? das am besten. Macht man dann einfach so zwei Render-Mechanismen und versucht die so pixelähnlich zu machen, wie möglich.
War mein erster Versuch. Keine besonders gute Idee, weil kriegt man nicht hin.
Zweiter Versuch war, okay, rendere den Crampon halt nach SVG.
Aber das ist halt tatsächlich ausgesprochen ärgerlich, was das so alles an Limitierungen hat, wenn es um so Layout-Geschichten geht. Also irgendwie, ich hab sieben Zeilen Text, und ich brauch dann halt irgendwie auch eine Box drumherum, die irgendwie so sieben Zeilen hoch ist oder so.
Wo man ja irgendwie bei CSS und HTML sagen würde, das ist einfach ein totaler No-Brainer, weil ich mach halt einen Diff drum, und dann ist das halt sieben Zeilen hoch.
Das ist halt wirklich total automatisch. Das ist bei SVG nicht, nur weil man die Dinger nestet, haben die noch lange keine Beziehung zueinander.
Sondern es ist im Prinzip alles absolut positioniert und dann rächt man sich einen Wolf.
Ja, das stimmt. Da musst du sehr viel zu Fuß gehen. Und was ich auch festgestellt habe, ist, dass du zwar Skripte einbinden kannst in SVG, aber du kannst keine Script-Type-Modules einbinden in SVG.
Oh, ich würd weitergehen.
Ich würde einfach sagen, die Umgebung, in der man überhaupt irgendwie was anstellen kann mit SVG.
Davon gibt's nur eine einzige, und das ist der Webbrowser.
[26:33] Mhm. Also, wenn's einfach nur so um deinen generischen Bildbetrachter auf deinem Desktop geht, die sind halt alle scheiße.
Die sind halt alle komplett wertlos, die können nix. Du müsstest wirklich, was du grade als zu Fuß gehen beschrieben hast, noch weiter runterbrechen und wirklich sagen, selbst die basalsten Features, für die es in SVG seit Ewigkeiten Standards gibt, kannst du nicht benutzen, Klingt so ein bisschen wie E-Mail-Templates bauen.
Ich glaube, nicht ganz. Du hast ja keinen Umweg.
E-Mail ist halt einfach so Pflicht. Aber wenn du jetzt wirklich diesen Weg runtergehst, ich will halt irgendwie aus meinem Text zu Grafik rendern, und du halt nicht sagst, ich reproduziere jetzt irgendwie so einen CSS-Renderer und einen Pixel-Renderer, und du halt eben auch sagst, okay, wenn ich was anderes machen will als das, kann ja nicht SVG sein, weil nur moderne Browser können das.
Und du dann akzeptierst, dass die Primärprämisse ist, nur moderne Browser können am Ende dein Ding darstellen, dann kannst du das Bild auch einfach rendern, indem du HTML und CSS schreibst.
Und das, was ich am Ende gemacht habe, Chromium in der Cloud, mit Puppetier hier, take screenshot, und dann dauert das halt eben ewig und frisst gigabyteweise an RAM, aber ganz ehrlich, Das kostet jetzt auch gar nicht die...
[27:46] Ja und eine frage noch screenshot da kommt am ende wahrscheinlich dann irgendwie jpg png oder wie auch immer raus, das nach pdf zu rendern war keine option weil es dann halt nicht diese transitions gibt und keinerlei.
[28:05] Ja, Bewegungen im Endeffekt? Oder was war das Problem?
Ja, also genau, die Transitions sind halt, ähm, das ... Also die Status sozusagen, die du hast.
Eine, genau. Also PDF geht eh nicht, weil da kannst du ja nix ein...
Das ist ja wie SVG, du weißt ja auch nicht. Je nachdem, in welchen Renderer du das reinwirfst, machst du das A, machst du das B oder C.
Nee, also mein Weg ist entweder, ich mach da halt CSS draus, und dann ist es im Prinzip, dass ich für meine Transitions sage, Die Transition ist zwischen, äh, ist, äh, Frame 1 0%, äh, Frame 2 100%.
Und mit CSS-Transition on top, sodass das Animieren dem Browser überlassen wird.
Mhm. Und für den Fall, dass ich halt tatsächlich ein Video machen will, dann mach ich halt ganz, ganz viele PNGs, und sag beim Transitioning-Mechanismus, dass er halt mehr als zwei Steps zu machen hat, sodass ich halt wirklich zwischen 0 und 100% die Dinger ausrechne.
Und dann mach ich da halt irgendwie mehrere Gigabyte an PNGs und pipe die in den Video-Renderer, und das geht eigentlich total gut, Du gehst zu Herzen, da klickst du in eine Kiste, die das machen kann.
Das kostet keine 20 Euro im Monat und gut ist.
Und schon hat man einen animierten Film. Und den Ton kann man dann auch noch irgendwie einsprechen lassen von der AI und du musst nur hinten das Script reinballern.
Und deswegen bist du halt besser in der Produktentwicklung als ich.
[29:22] Weil auf den Trichter bin ich noch nicht gekommen.
So, ta-da. Produkt Nummer zwei. Kaufen Sie jetzt bei Peter Gröner? Nein, Spaß.
Das nennt man doch nativ, nativ embettete Werbung, glaube ich, aber wir machen eigentlich ja gar keine Werbung.
Wir machen keine Werbung, nein.
[29:37] Okay, aber so viel zu dem Thema, was die radial gradients machen in svg und noch ein bisschen darüber hinaus, ich glaube aber grundsätzlich so sich an svgs abgearbeitet haben wir uns alle wahrscheinlich schon mal und wenn es nur war, weil wir irgendwelche icons mit den farben verändern wollen und irgendwas anpassen oder i don't know what.
So, das war zumindest jahrelang mein Standard-Use-Case.
Oder wenn ich irgendwie ein cooles SVG hatte und wollte da eine Kleinigkeit nur mal eben schnell ändern und in der Oberfläche im Programm der Wahl hat's dann doch nicht geklappt.
Und dann war mal wieder alles zerschossen. Aber, ey, so ist es.
Ja, ich komm mit den Vektorprogrammen auch nicht klar. Also, genau, wenn ich in den Quelltext reingehe, dann weiß ich wenigstens, was ich bekomme.
Im zweiten Fall nichts, aber ich hab da mehr Kontrolle drüber manchmal.
Du musst auch viel wissen. Ich bin jetzt von der Cox-And-Dunn-Fraktion und find ja Inkscape für so meine Diagramme, die ich für Präsentationen oder so mache, wo ich einfach nur Boxen und Pfeile brauche.
[30:49] Das geht schon ganz gut, wenn man visuell ganz schnell wählen kann.
So hier die Farbe, die Farbe, bla, bla, bla, Layering und so.
Das ist schon ganz gut, aber sobald es halt über diese Komplexität hinaus geht, wenn man halt im Code... Sobald man mit so Bezierkurven da irgendwie anfängt, rumzuzupfen und zu machen und so...
[31:10] Also ich weiß ja nicht, was du benutzt, aber modernes Inkscape ist echt erschreckend gut.
Also dafür, dass das wirklich nix kostet, sondern komplett free Software ist, ist das wirklich ein bisschen beängstigend. Also ich finde, ich müsste dafür bezahlen.
Jetzt nicht irgendwie Unsummen, nicht irgendwie jetzt hier dicke dreistellige Beträge, aber dass das umsonst ist, finde ich ein bisschen unanständig.
[31:31] Ja, vielleicht kannst du ja donaten oder irgendwie sowas. Das kann man, aber ich finde halt so, ich kann es halt einfach über so ein Terminalkommando installieren.
Das ist doch irgendwie ein Scam oder so, das kann doch gar nicht passen.
Dass das geht.
Also, was man ja auch nicht vergessen darf, wenn du das jetzt alles so sagst, du bist ja grundsätzlich auch Linux-Nutzer.
Ja, das heißt also, meine Erwartungen sind ja niedrig angesetzt, willst du damit sagen.
Habe ich so habe ich diesen schlechten wird auch noch untergebracht und ja ich glaube wir sollen wir weiterspringen was halten wir davon genau lasst es mal wieder rotieren.
Dann ist der chef wieder am start du bist du bist ja ja ja das ging ja schnell mensch.
Spellcheck-Attribut
[32:21] Ah ja, ich habe heute einen Glücksgriff. Ich bin wieder im Global Attributes Bereich unterwegs.
Und diesmal ist es der Spellcheck. Das Spellcheck Attribut, um ganz genau zu sein.
Das ist ein Attribut, das kann man eigentlich auf jedes Element legen. Deswegen ein Global Attribute.
Und ich sage jetzt mal, ich habe es nicht verwendet bisher, aber ich gehe mal davon aus, was man kann damit ermöglichen, dass ein bestimmtes Element anzeigt, ob da ein Fehler in der Rechtschreibung vorliegt oder nicht.
[32:59] Also, du kannst damit angeben, ob sozusagen ein Browser das Element in Betracht ziehen soll, es einem Spellcheck zu unterziehen, so der Browser das anbietet, und es sonst keine irgendwie das Überstimmende Bedenken gibt.
Also, du willst vielleicht nicht einen Spellchecker, der die Daten irgendwie abschickt zum, keine Ahnung, in irgendeinem Server.
Den willst du vielleicht nicht aktivieren, auch wenn Spellcheck-Attribut an ist, wenn das Ding im privaten Tab offen ist zum Beispiel.
Ah, das ist ganz interessant. Und hier in der Demo ist es tatsächlich so, dass der Spellcheck auch erst dann aktiv wird, wenn man das Element aktiviert. Also, ich habe jetzt zum Beispiel bei mir eine Applikation im Browser installiert, die mir halt Fehler in einem beispielsweise Content-Editable-Element oder halt in einer Text-Area anzeigt, Ja, die zum Beispiel dann rot unterstreicht, wenn ich was falsch geschrieben habe oder so.
Und diese springt erst an, oder springt nur an, wenn das Spellchecker-Attribut auch auf true gesetzt ist. Wenn es auf false gesetzt ist, springt die nicht an. Also das kann man darüber aktivieren und deaktivieren anscheinend.
[34:18] Was ich ja komisch finde, ist, es ist ja ein globales Attribut, das heißt, das kann man überall draufsetzen.
Aber, also, ich frage mich gerade, würde das auch Dinge unterschlängeln, die falsch geschrieben sind, wenn es keine, also keine Inputs sind, und kein Content-Editable-Attribut drauf ist?
Also Dinge, die quasi Reader-only sind, würde es da auch funktionieren?
Oder ist es deswegen eben ein globales Attribut, weil Content-Editable auch ein globales Attribut ist und man das ja überall draufsetzen könnte und um dann in dem Fall auch überall Spellchecking an- und oder abzuschalten zu können, muss halt Spellcheck, ebenfalls global sein. So wie ich das in der Spezifikation jetzt gerade querlese, ist letzteres der Fall. Genau, also es müsste irgendwie, genau, Dinge, die mit Dingen müssen mutable sein, also keinen Read-Only haben bla bla bla und die müssen halt editierbar sein.
[35:17] Lese ich jetzt so zwischen den Zeilen draus. Die Spezifikation hat da einen erstaunlich elaborierten Algorithmus, beziehungsweise mehrere am Start, um halt so rauszufinden, unter welchen Umständen das Ding aktiviert sein soll oder auch nicht.
Weil, also, es ist ja, es hat ja irgendwie so die Werte true, false und was hat's noch? Inherit, glaube ich.
Also es ist ja tatsächlich kein Boolean, sondern ist ja so ein enumerated Attribute.
Und hat dann halt eben je nachdem, wie es eingestellt ist und auch, was das Element so hat, States, die True by Default, False by Default und Inherit by Default heißen.
Und je nachdem, auf was für Elementen das ist und wieso der Editierbarkeitsstatus ist, kommt es halt in den True by Default, False by Default oder Inherit by Default State rein.
Und das entscheidet dann, ob der User Agent sich dafür entscheidet, einen Spellcheck in Erwägung zu ziehen.
Gegebenenfalls gibt es vielleicht so Dinge wie, das Ding schickt halt Daten nach Hause und du hast Privacy an, deswegen wird's eventuell gar nicht passieren, egal, was die Attribute sagen.
[36:22] Ja, und vielleicht sollte man noch ergänzen, dass es wahrscheinlich klug ist, das korrekte Leng-Attribut auf das Element oder eben auf das Dokument zu setzen, Damit eben das Spellchecking auch irgendwie sinnvolle Vorschläge macht.
Das sollte so sein, genau.
[36:48] Verwendung, ich habe es noch nie verwendet. Ich muss aber auch sagen, dass ich Content Editable in den letzten Jahren, also mal abgesehen davon, dass ich nicht mehr so viel programmiere, aber auch gar nicht mehr viel verwende.
Ich habe das mal eine Zeit lang gemacht, wenn ich mal irgendwo eine Oberfläche hatte, wo vielleicht ein Editor am Start war oder so.
Aber sonst, also hab ich jetzt aktuell keinen Use Case in den letzten Jahren gehabt, weil man halt auf alles so viel JavaScript wirft. Ich weiß nicht, wie es euch geht.
Aber dann hast du es doch gegebenenfalls unter der Haube.
Ja, also gerade dann würde ich sagen, könnte man es gebrauchen, genau, weil, also ich habe zum Beispiel so eine Combo-Box gebaut, also quasi ein durchsuchbares Select oder filterbares Select.
Und da hab ich Content Editable benutzt, weil ich dann, genau, ich hätte auch einen Input nehmen können, wahrscheinlich, aber hab ich dafür Content Editable entschieden.
Und dann ist der Input quasi in einer Reihe mit den Tags oder Chips oder wie auch immer man das nennt, der Option, die man schon ausgewählt hat.
Und dann kommt das quasi als Letztes dahinter.
Verstehe, ja.
[38:03] Macht Sinn. Ja, da muss ich halt sagen, genau solche Sachen habe ich halt sehr, sehr lange nicht mehr selber gebaut, weil die in den Anwendungen, wo ich das mal gebraucht habe, dann ja irgendwie schon zu Hauf existiert hatten.
Das sind auch eher anstrengende Konstrukte, wo man das braucht, würde ich sagen.
Ich wollte gerade sagen, mein Use Case ist ein Code Editor, wo der halt eben fürs Highlight hängt, da in den Text, den du eigentlich schreibst, überall Suspense einbauen muss und so, damit das richtig gehighlighted ist.
Das will ich auch nicht zu Fuß machen, da nehme ich schon ein CodeMirror für und sage einfach, mir regelt der schon.
Ja, das ist schon ziemlich eklig.
Kindeed. Dann ist der Peter jetzt dran. Juhu, dann drehe ich mal am Zufallsgenerator.
Drei, zwei, eins.
Screen-API
[38:53] Das Screen-Change-Event in den Screen-Details, was auch nicht verlinkt ist. Wir haben's heute.
Mhm. Aber das sind ja dann brandneue Dinge. Nämlich bei dem SVG ja nicht.
Will einfach keiner sich mit beschäftigen bei dem SVG.
Wobei wir das ja zusammengefasst hatten auf der darüber liegenden Seite, glaube ich einfach.
Screen Details, interessant, interessant. Aha, how to use multiple screens, hier, web.dev.
Bla bla bla, etc. Super, erklärt mir die API, ohne mir zu sagen, was sie macht.
1A Artikel, mein Freund.
Mhm. Screen API, da, da, ich hab's bei MDN gefunden. Screen API heißt es.
Ah, das ist einfach nur Screen. Genau. Obtained using window.screen et cetera.
Und der sagt mir auch nicht, wozu das gut ist.
Also, auf jeden Fall kriegt man Infos raus, also so Farbtiefe und Orientation und so.
Naja, vielleicht, wenn du ...
Vielleicht ist das so was, ein Fenster auf einen anderen Monitor schiebst oder so was.
Dass du dann irgendwie Bescheid bekommen möchtest.
Aus Gründen. Ich weiß nicht, was man dann machen möchte.
Ähm, ja. Aber warum?
[40:19] Hm. Ich denke, mein Browser rendert allen möglichen Krempel vom Videostreaming bis zum Textverarbeitungsprogramm in dieses Fenster da rein und bleibt da auch drin. So schön gesandboxt.
Was geht denen an, ob ich mein Bildschirm hochgekannt habe oder nicht?
[40:35] Eigentlich nicht, genau. Aber du, ich finde das hier nicht. Ich glaube nicht, dass wir da, also auf MDN, weiß auch nicht, warum man das ausgespuckt hat.
Screen Details, tja. Warte, warte, ich schicke das mal kurz hier in den Chat, dass ihr auch lesen könnt.
Ja, es existiert auch noch was vom W3-Org. Nämlich Window Management.
Ja, das ist das wahrscheinlich.
Das ist wahrscheinlich das Pendant dazu. Ist tatsächlich recht frischer Working Draft vom 5. April, Diesen Jahres, also 2023, je nachdem, wann diese Sendung hier erscheint.
Nein, Spaß.
Using window get screen details. Das klingt doch schwer danach. Das ist es auch, ja.
Und da gibt es ein Event Screen Change. Ja. Detect when a screen is added or removed.
[41:28] Aha, okay. Naja, wenn vielleicht irgendwie man sein Fernseher anschließt an den Laptop, oder zum Beispiel eine Präsentationssoftware in Webtechnologie geschrieben, man schließt den Projektor an und dann will man eben, dass die Präsentation auf diesem Projektor ist.
Und genau, das ist tatsächlich bei den Motivating Use Cases, das ist ja das Gute an so einer Spezifikation beim P3C. Die müssen ja mal begründen, warum sie was einführen.
Das steht da tatsächlich als allererster Eintrag drin, dass man da so eine App...
Und wenn man die auf den Projektor schiebt, dann soll die in den Modus gehen und auf dem Laptop halt die Notes anzeigen oder irgendwas anderes. Multiscreen Gaming.
[42:16] Vielleicht auch für diese Falt Handys irgendwie relevant weiß ich nicht die.
Wenn die zusammen gefaltet sind haben die doch sind doch die unabhängig voneinander die Screens und wenn man die aufklappt dann ist das halt einer oder so.
Ja okay.
Ich kenne mich damit aber nicht aus diesen auch einfach zu teuer als dass ich so ein ding jemals in der hand gehabt hätte.
Ja leider leider redet ja keiner was schlechtes über die also ich denke halt ebenso ne das bezahle ich nicht aber alle sagen irgendwie ja ist eigentlich ganz nett.
[42:50] Joa ich also ich bin noch nicht überzeugt aber auch da vielleicht haben unsere hörer ja so ein ding oder vielleicht in eurem test lab in der firma oder sowas und dass ihr uns spenden wollt.
Dass ihr den peter spenden wollt und könnt könnt berichten was ihr daran gut findet oder was vielleicht auch doof ist bei den diggern.
Zum thema preis völlig irrelevante information ich habe jetzt im spaß mal geguckt also für 410 euro kriegt man auch schon refurbished das samsung galaxy z flip 3.
Nicht okay das ist aber das ist auch schon echt so die ältere generation also.
Flip 3 ist das halt. Pixel Fold kostet 1.900 Euro oder ab 1.900 Euro.
Das finde ich dann auch schon eher happig.
Da gibt es dann auch von Microsoft dieses Surface, wie auch immer.
[43:46] Das Tablet. Ist das ein Tablet oder gibt es auch ein Phone? Die haben auch ein Surface Phone, glaube ich.
Ach, das Flip 3 ist ja cool.
Also damit hast du ja wirklich so diesen diesen Flip-Phone-Effekt von früher wieder mit dem Layout, wie sie es haben.
Also so Motorola Razer-mäßig oder was? Genau, weil ich meine das Pixel-Ding ist ja tatsächlich, das faltest du ja auch wie ein Buch.
Okay, deswegen ist es aber auch so günstig.
Also so günstig in Anführungszeichen. Und das Flip ist ja wirklich, das du wieder so die alte Business-Macker-Geste hast.
Aber so das war ja so das erste also ich glaube samsung hatte ja als erstes so dieses.
Klapp handy habe ich so zumindest irgendwie im kopf und ansonsten kann ich natürlich das phone sl 595 für 52 99 bei satura bei.
Irgendwo im internet empfehlen es wird jetzt hier zwar als senioren handy deklariert aber.
Aber das ist glaube ich ein richtig feines Gerät. Ja, es hat auf jeden Fall auch zwei Displays.
Vorne eins, hinne eins. Also innen drin eins.
Gut. Cool. Also die Use Cases sind schon da, aber die API muss ich noch durchsetzen. So.
[45:07] Dann würde ich sagen, setzen wir uns gegenüber den Screen Details durch, indem wir den Knopf drücken, oder? würde ich vorschlagen.
Border-image-repeat
[45:17] Okay, CSS Properties, Border Image Repeat. Jawoll.
Das fällt so ein bisschen in die Kategorie, die ich mit dem Peter letztens hatte.
Da ging es um das Mask Border Image.
Und da aber um das Slicing, aber im Endeffekt war das ja die Maskierungsausgabe von Border Image.
Genau. Ja. Ich glaube, bei dem Border Image Repeat, wenn ich mich da erinnere, da kann man sagen, wiederhole halt quasi ganz normal und wenn dann irgendwie die Seitenkante des Objekts, in dessen Border du dich wiederholst, eben nicht lang genug ist, dann, oh, schade, wirst du halt abgeschnitten irgendwann.
Nee, kann ich aussuchen.
Genau, und du kannst dann auch quasi auf, weiß nicht, wie das dann heißt, fit, das Keyword oder so was, oder even, oder? Round.
Round, genau, und dann wird das Bild eben etwas gequetscht oder gedehnt, sodass es dann quasi bei der x-Wiederholung auch tatsächlich exakt auf dem Ende der Border-Fläche liegt.
Genau.
Naja, und Stretch gibt es noch.
[46:35] Space auch, okay, das ist dann eigentlich wie bei Flex, also dass dann quasi einfach ein bisschen Abstand dazwischen gelassen wird, so wie Text-Align-Justify. Einfach so ein bisschen größere Lücken zwischen den Repeats bleiben.
Sind wir da letztes Mal, Chap, zu einem Ergebnis gekommen, ob wir das mal eingesetzt haben, in Ernst?
Also ich hab Border-Image, ich glaube, ich hab's schon eingesetzt, aber echt selten.
Also das ist so, ich würde das, würde andere Dinge zuerst tun, zuerst tun wahrscheinlich, weil ich finde daran blöd, dass man, wenn man zum Beispiel die Farbe ändern will, bei einer Bitmap-Grafik eben dann, keine Ahnung, eine Bildbearbeitung starten muss, um dann nochmal Dinge anzupassen.
Deswegen versuche ich eben alles eher über CSS oder SVG zu machen. Oder was ich mir auch vorstellen könnte, ist ein SVG, ein in CSS geinlinetes SVG zu verwenden als Border-Image, wo ich dann quasi auch im Code-Editor vielleicht Farben ändern kann und so.
Ja oder PC. Geile These. Ja oder so.
[47:50] Sorry, Hans. Ja, ich wollte nur darauf hinaus, dass ich bei diesen ganzen Border-Image-Geschichten, glaube, also damals, das war gut gemeint, ja?
Als so CSS3 aufkam, glaub ich, war das ja auch so eins der Features, ne?
Und das war gut gemeint, weil man dachte, ja, cool, dann kann man so viele Sachen damit machen.
Aber das Design hat sich überhaupt nicht dahin entwickelt.
Also man hatte gar nicht vor, überall Tausende coole Borders drum zu machen, nicht so fancy aussieht, wie man sich es vielleicht gewünscht hat.
Also wie Border Radius, als man runde Ecken machen konnte, wollte keiner mehr runde Ecken oder als, ja.
Box Shadow ist das gleiche, oder Text Shadow. Wobei das, bei denen ist es, finde ich, noch mal ein bisschen anders.
Zum Beispiel, also Border Radius, ich glaube, wenn man mal eine Analyse über die Top 100.000 Webseiten macht oder keine Ahnung, die Seiten mit den aller, weiß ich nicht, 10 Millionen meisten Impressions oder wie auch immer, da würde man sehr häufig Border Radius finden, man würde auch sehr wahrscheinlich viel Box Shadow finden, man würde auch sehr viel Text Shadow verwenden, weil es ja häufig verwendet wird, wenn man eine Schrift beispielsweise auf einem Bild, hat, aber nicht weiß, was der Hintergrund ist und du so eine Art Outline noch machen möchtest oder sowas, ne?
Ja, dafür benutze ich es auch.
[49:12] Border-Image, ich weiß nicht, mir fallen nicht so viele andere Sachen ein, die so gekommen sind und auch ein bisschen gehypt wurden und dann aber nie verwendet wurden, ja, also das gehört auf jeden Fall für mich auf die Liste der Sachen, die halt jetzt da sind, wir werden sie nicht mehr loswerden, aber brauchen tun wir sie nicht wirklich.
Steile These jetzt, vielleicht ist sie völlig falsch und ihr schickt mir jetzt als Hörerinnen und Hörer gleich mal 20 Links zu, wo ihr sagt, hey, hallo, diese coolen Webseiten würden so cool nicht aussehen.
Wäre es nicht Border-Image, die sie dahin gebracht hätten.
Aber I doubt it.
In 10 Jahren würde ich das eventuell mal machen, wenn der Trend wiederkommt.
Es ist halt immer so ein zyklischer Moment und du hast völlig recht mit dem, was du beschrieben hast, von wegen, dass sowas wie ein Box-Shadow und ein Text-Shadow, die sind halt einfach viel basalere Design-Elemente. Damit bist du nicht an einen bestimmten Stil gebunden und kannst halt eben vor allen Dingen mit Text-Shadow und so Zeug ja machen, der entweder so ein voll smoother Schatten ist für so Web 2.0-Effekte und du kannst dann auch einen harten Schatten machen für irgendwie was, was so ein bisschen rotziger aussieht. Border-Image-aside-Border-Image. Und ich glaube, da ist halt tatsächlich die Spezifikation gekommen, als die Design-Sprache, die das wollte und der Trend, der das wollte, schon längst wieder hinten runtergefallen ist.
Ich würde nur nicht ausschließen, dass das nicht irgendwann wiederkommt.
Die 90er sind ja stark wieder auf dem Vormarsch, also wer weiß.
[50:34] Mhm. Ja, klar. Und solange es halt keine Alternative dazu gibt.
Also, ich sag jetzt mal, bei so was wie Marquee-Tech war cool gedacht, aber wir wissen halt, dass wir es auch anders erzeugen können, falls wir diesen Ticker-Effekt irgendwie brauchen.
Natürlich ist es einfacher, einfach irgendeinen Text in Marquee-Tech zu schreiben, als irgendeine Animation, und da musst du noch die richtigen Größe und bla bla bla was nicht alles haben, ja.
Ähm, nichtsdestotrotz, bei Border-Image sehe ich jetzt auch kein richtiges Replacement.
Was mir jetzt gerade noch so einfällt, also was sehr ähnlich ist, ihr habt es eben schon angesprochen, ist das Thema mit dem Masking.
Und da könnte man ja auch vielleicht so eine Border, sag ich mal, faken, indem man irgendwie so eine, so eine Mask verwendet, um diese Border einzustellen.
Genau, das ist ja auch so ein bisschen die Idee, dass man dann statt einfach einem PNG-Bild, und das enthält alles inklusive Farben, eine Maske angibt, und dann kann man die Farben per CSS steuern.
Aber das macht natürlich so die Feinkontrolle ein bisschen schwieriger.
Also, wenn du ein Bitmap hast, kannst du ja auch Rauschen und Zeug da reinbauen ohne Probleme.
Und das geht mit CSS, mit den entsprechenden Filtern auch, aber es ist ein bisschen mehr Aufriss, also, man weiß es nicht.
Würde ich sagen, es ist das eine Ersätze, nicht das andere, ist irgendwie das, was weiterträgt, etwas schlauer ist von der ganzen Anlage her, aber wie gesagt, möglicherweise kommt der Trend wieder.
[52:02] Schauen wir mal zehn jahre halten wir noch durch. Jetzt haben wir schon so lange gemacht, jetzt höre ich auch nicht auf.
Drohen wir jetzt hier einfach mal irgendwann sind wir aus dem altersheim zugeschaltet.
[52:19] Genau über unsere antiken iPhones ja das war damals die technologie.
Ja und dann stimmt wirklich nur noch da wird nur noch geschimpft und der krückstock in die luft gehalten.
Okay, und das unterscheidet sich vom jetzigen Working Draft also aus meiner Perspektive jetzt ja nicht ganz so sehr.
Ja, das stimmt, aber dann sind wir ja alle dran.
Ah ja.
Bin ich mal wieder als Vorreiter unterwegs. Wollen wir noch eine machen?
Einer geht noch. Einer geht noch. Wer hatte das jetzt noch mal gemacht?
IDBRequest/result
[52:48] Ich hab's vergessen. Wer ist dran, mein ich?
Ich glaube, ich war das. Kann das sein?
Ja, hast du's gedrückt? Ich glaube. Dann ... nee, Moment, ich hab's gedrückt.
Ach, komm, Hans, mach du. Okay, komm, Hans, auf geht's.
Ich hau einfach mal rein und wir landen bei IDB-Request-Result.
Ich find das super, das schließt nämlich genau an das an, was wir gerade hatten mit dem Border-Image.
Also es geht um Index-DB, ja? Genau, wo ich behaupten würde, auch so ein Trend-Juxe, das sich halt in den Browser mit einem Brecheisen reingezwängt hat, gezwängt hat, zu dem Moment, wo halt gerade alle dachten, aha, NoSQL-Datenbank ist die Zukunft, wir werden niemals etwas anderes brauchen.
Und deswegen ist das der Default und alle haben es seither bereut.
[53:36] Das ist mein Hot-Take zu der Situation. Mhm.
Ja, also, IndexDB ist ja wirklich eklig, damit zu arbeiten, oder?
Das will doch niemand.
Da nimmt man doch immer irgendeine Library, die das für einen wegabstrahiert.
Das ist maximal unzumutbar.
Du sagst jetzt, es wäre widerlich. Das hört sich an, als wäre das ein Werturteil.
Als könnte man hier nicht objektiv feststellen, dass das gänzlich unzumutbar ist, damit nativ zu arbeiten.
Sind wir mal ehrlich. Ja.
Tja, also genau, man würde eine Library stattdessen benutzen, die das sozusagen vor allem versteckt, die Unzulänglichkeiten vielleicht.
Also sowas wie, na, wie heißt denn die Library von TakeArchibild, die ganz gut, ganz cool ist, vergessen.
Die ist irgendwie an so, LocalForage, glaube ich, heißt die.
Ja.
Genau, dann gibt's ja noch hier diesen CouchDB-Port, mit Pouch-DB, der auch dann intern Index-DB benutzt.
Mhm. Ich glaub, das ist auch auf jeden Fall angenehmer zu benutzen als die Index-DB, obwohl es auch eine NoSQL-Datenbank ist.
Aber du hast halt dann noch quasi die Möglichkeit zu synken mit einer Couch-DB, ist cool.
Mhm. Und, äh, ja, sonst würdest du wahrscheinlich dir irgendeine WASM-getriebene SQLite-Geschichte holen, wenn du irgendwie eine Datenbank brauchst, oder?
Wenn's nicht nur um das Speichern von Dingen geht.
Jo, das würde ich nämlich genau so betrachten. Es ist halt wirklich so.
[55:04] Also die API ist unzumutbar, das ist das eine, zum anderen ist es halt eben von seinen Fähigkeiten her auch, glaube ich, echt genau so an einer Stelle, so auf der Fähigkeiten-Skala, wo man es halt echt schwer gebrauchen kann.
Weil es halt echt fies zu benutzen ist, und man kriegt halt nicht viel dafür, weil es halt keine bequeme Query-Sprache gibt und sowas ähnliches.
Und ich meine, das Argument, warum wir nicht einfach, beim SQL, das gab es ja auch, warum wir das nicht im Browser haben, ist ja nicht inkorrekt.
Weil SQL ist ja tatsächlich ein auch sehr theoretischer Standard, da hält sich ja keine Datenbank wirklich an das, was im Dokument steht.
Und theoretisch würden verschiedene Browsern, verschiedene Browser-Versionen, die könnten sich ja darauf einigen, irgendwie SQLite zu verwenden und das einzubetten, aber trotzdem wäre es dann halt eben im Chrome und im Firefox und im Opera und in der Edge-Version, die eins zurück ist, wären das jeweils unterschiedliche Datenbanken mit möglicherweise unterschiedlichen Behaviors, und das willst du ja bei einer Web-Technologie tendenziell eher nicht.
Da willst du ja wirklich eine API haben, Und dahinter ist ein Mechanismus spezifiziert, der sagt, wie verhält sich das Ding?
Weil das ist ja, was die Index DB ist. Das wird ja unter der Haube in den verschiedenen Browsern teilweise tatsächlich als SQL-Datenbank gespeichert, weil das halt wirklich einen bizarren Übersetzungsprozess macht, weil was halt nur spezifiziert ist, ist die Oberfläche.
So. Du kannst das mit SQLite nicht machen, weil du halt durch den Query direkten Durchgriff auf das Behavior hast.
Läuft so nicht. Aber wie verwendest du denn in einer normalen Desktop-Applikation SQLite?
Du schleppst das mit. Das ist halt eine Technologie zum Einbetten in die Applikation.
[56:28] Und das würde ich tatsächlich bei einer Web-Applikation heutzutage genauso sehen.
Du bettest das halt eben ein.
Wie du gesagt hast, WASM und Schießmichtod nimmst du halt eben mit.
Ist jetzt irgendwie so der große Hammer von wegen, oh nein, mein großer Payload, den ich runterladen muss, für meine ultrakomplexe Web-Applikation.
Man hat halt heutzutage die Wahl zwischen dem und einer Excel, die du auf deinem Mac nicht benutzen kannst, und vielleicht noch eine Elektronen-App, die du noch dreimal nicht runterladen willst, weil noch viel größer.
Also macht man genau das, was du gesagt hast, Chef. Und das ist auch tatsächlich, würde ich sagen, der sinnvolle Weg, weil dafür ist es halt gedacht.
[57:00] Ja, naja, das ist ja so, wie es gab ja mal Überlegungen, nicht Überlegungen, sondern eher Wünsche der Webentwickler-Schaft, dass die Browser irgendwelche populären JavaScript-Bibliotheken sozusagen als Standard-Library mitbringen.
Und da hätte man ja auch das Problem gehabt, so erst mal, so klingt ja gut, man hat weniger runterzuladen, viele nutzen das, Aber welche Version nimmt man da?
Und welcher Browser unterstützt da welche Version von React?
Oder sagt man einfach so, einmal im Jahr einigen wir uns auf eine React- oder Angular-Version, die da machen wir jetzt einen Snapshot, und die packen wir jetzt für ein Jahr immer in unsere Browser, dass Webentwickler und Webentwicklerinnen sich eben noch verlassen können.
So, das Ding im Browser, das kann halt diese Sachen. Und das, was ich eben separat reinladen muss, das kann halt ein paar mehr Features vielleicht, weil das eben schon wieder ein bisschen weiter ist.
Aber so das find ich schon schwierig. Und ich glaube, daran scheitert wahrscheinlich generell dieser ganze Standard-Library-Ansatz in Browsern, oder?
Würde ich sagen.
[58:10] Also, weil die Idee, die du da gerade beschrieben hast, die ist ja offensichtlich absurd.
Man muss sich nur mal vorstellen, wir einigen uns am Stichtag X, wir bauen da die Angular-Version schießmichtot rein und versprechen hoch und heilig, das nächste Update kommt erst in einem Jahr, wenn der Zyklus durch ist.
Wäre jetzt ja denkbar, weil die Release-Zyklen einigermaßen synchronisiert sind.
Da kann man ja ein Agreement finden.
Nur, was machst du, wenn in dieser Angular-Version, die du überall einbettest und an Millionen von Leuten rausschippst, Du hast ja hoch und heilig versprochen, bloß nichts zu updaten.
[58:43] Ja, na ja, gut, dann würdest du wahrscheinlich irgendwie einen minor change, äh ...
Oder einen Bugfix-Update ausspielen oder so was und an der eigentlichen API nichts ändern oder so.
Aber Moment, Moment, Moment.
Da sind wir jetzt wieder bei Symantec Versioning und meiner Lieblingskurrentenkackerei, die da ja besagt, wenn du einen Bugfix veränderst, du wirst beobachtbares Verhalten, eine Veränderung von dem Verhalten, das da rauskommt.
Ja, aber du, ich sag mal, das ist ja so allgemein, wird das ja als tolerabel, also als quasi keine wesentliche Änderung betrachtet.
Für dein Dependency Management, nicht für deine Software. Du willst ja schon sagen, wenn du deine Angular-Applikation geschrieben hast, dass die dann sich so verhält, wie du es getestet hast.
Und wenn du dann nicht halt darauf verlassen musst, dass die Browser irgendwie tatsächlich nur Dinge fixen, die meiner genug sind, dass man es wirklich nicht merkt.
Also, wie soll das denn funktionieren? So ein Semantic Versioning ist ein Mechanismus, um inzwischen Developer zu kommunizieren, mit wie viel Aufwand man zu rechnen hat, wenn man sich das runterlädt und neu installiert, das Update.
Aber tatsächlich, das als eine Garantie bezüglich dessen, wie sich die Software verhält, da ist ein bisschen zu viel reingelegt in diese Versionsnummer, würde ich behaupten. Und deswegen ist das...
[1:00:00] Also, wenn gleich von der schieren Mechanik her denkbar, geht es halt kaputt, sobald das erste Mal irgendwo, ein Bug auftritt, weil dann werden alle updaten wollen und dann ist halt eben dieses ganze Agreement für die Füße und dann weißt du halt nicht mehr was deine Software macht und wenn ich eins von meiner überkomplexen React-Applikation brauche, dann brauche ich neben dem ganzen Overhead und der Mühe und der Langsamkeit, die die verursacht, auch noch die Schwierigkeit von Web-APIs, wo ich halt nicht weiß, welcher Browser was kann.
Das ist wirklich so, da findet zusammen was zusammengehört.
Ja.
Äh, vielleicht abschließende Frage, weiß jemand, was aus dieser Standard-API, ähm, weiß ich nicht, Forschungsreise vom Chromium-Team geworden ist?
Da gab's doch irgendwie so einen Virtual Scroller, der da mal drin war, und so ein paar andere Sachen, mit denen man rumspielen konnte.
Ist wahrscheinlich alles sang- und klanglos wieder verschwunden.
Ich weiß nicht mal, wonach ich googeln müsste.
Ja, wie ist es denn nochmal? Warte mal, Chrome Standard Library und dann sag ich jetzt mal Virtual Scroller.
Und los geht's.
[1:01:11] Nee.
Naja, gab's auf jeden Fall mal.
[1:01:18] Vielleicht war der Virtual Scroller auch einfach... Doch, der war, glaub ich, so ein Web Component verfasste...
Ein verfasstes Ding in dieser Standard Library, die die eben mitliefern wollten.
Weil die die ausprobiert haben. Moment, also, die Standard Library wäre dann in Form von Web Components dahergekommen?
Nicht nur, glaube ich, aber genau auch so hier habe ich Plattformstatus, was ist denn da, was sagen die dazu?
Also ich meine, dann wird es wirklich richtig seltsam, weil wo ist denn da noch wirklich der Unterschied zwischen einem HTML-Element, das die da erfinden und einer Library-Funktion?
Ja, die Idee war ja in dem Fall, dass man quasi auch den eigentlichen den Sourcecode dann nehmen könnte und den dann laden könnte, wenn man Feature detektet, dass ein Browser eben diese Standard-Library nicht mitbringt.
So, das ist die Idee. Also, man spart im Prinzip nur Download.
[1:02:24] Aber, also, hm. Aber, Chep, müsste man da nicht auch irgendwie relativ einfach was Ähnliches hinkriegen, indem man einem CDN einen Euro in den Hut wirft und die richtigen Header einstellt und so?
Ja, wahrscheinlich schon. Deswegen steht hier auch Implementation Status no longer pursuing.
Gut. Ich glaubte mir nicht, dass das gut gegangen wäre. Ja.
[1:02:48] Sachen gibt's. Oder gab's. Ist wirklich komplett von meinem Radar runtergefallen.
Ich hatte das auch irgendwie gesehen, dass das existierte.
[1:02:57] Ich glaub, es gab so zwei, die hatten mit zwei Dingen angefangen.
Es gab diesen Virtual Scroller und es gab irgendwie noch was.
Und das waren jetzt erst mal die zum Start.
Das ist so eine bizarre Idee.
Wir haben extra diesen Web-Component-Namespace, die Tag-Namen mit dem Bindestrich, reserviert für die Developer.
Und dann gehen wir hin und bauen seitens des Browsers Elemente ein und besetzen diesen Namespace wieder, weil es sind ja technisch gesehen keine Elemente, weil es nicht in C++ implementiert ist, sondern in JavaScript und das macht alles anders.
Wahnsinn. Okay, meine Herren, ich habe genug gerantet. Wollen wir einen Deckel drauf machen?
Machen wir.
Das war doch eine schönere Version, 500 und ein paar gequetschte.
War total super. Ich will trotzdem noch der Vollständigkeit halber anmerken, dass ich tatsächlich nicht alles schlimm finde und eigentlich ganz gut drauf bin.
Sehr gut, aber das wissen wir, glaube ich. Ja, gut. Genau.
Ja, cool. Dann vielen Dank für diese schöne Runde. Viele Grüße, schönen Abend und den Hörerinnen und Hörern ein Dankeschön fürs Reinhören.
Und da das ja Revision 500 und ein paar gequetschte ist, wissen wir auch nicht, was in der Revision 500 und ein paar gequetschte Plus Eins passieren wird, aber bestimmt was Cooles.
Darum, bleibt immer dran, drückt die Glocke, lasst euch benachrichtigen.
Bewertung nicht vergessen, danke fürs Zuhören und tschüss. Danke, tschüssi.
[1:04:23] Music.
[1:04:46] Bis zum nächsten Mal.